<template>
  <div class="product-list">
    <dl class="product-item" v-for="(item, index) in products" :key="index">
      <dt>
        <img :src="item.cover" />
      </dt>
      <dd>
        <div>
          <h2>{{item.name}}</h2>
          <p class="des">累计{{item.sales}}份</p>
        </div>
        <p class="price">
          <b><i>¥</i>{{item.price}}</b>
          <s>{{item.oldPrice}}</s>
        </p>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  props: {
    products: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.product-list {
  @include wh(100%, auto);
  .product-item {
    @include wh(100%, auto);
    @include flex();
    @include border1px(bottom);
    padding: 30px;
    dt {
      @include wh(240px, 240px);
      img {
        @include wh(240px, 240px);
      }
    }
    dd {
      @include wh(100%, 240px);
      flex: 1;
      @include flex(column, space-between, flex-start );
      h2 {
        font-size: $font-size-l;
      }
      .des {
        font-size: $font-size-s;
        color: $text-des-color;
        margin-top: 12px;
      }

      .price {
        font-size: $font-size-m;
        b {
          font-size: $font-size-xl;
          color: $base-color;
          margin-right: 20px;
          i {
            font-size: $font-size-m;
          }
        }
      }
    }
  }
}
</style>
